<template>
  <div>
    <textarea class="enditConfig-textarea" v-model="configSource"></textarea>
    <div class="edit-btn">
      <el-button type="primary" @click="save">{{$t('message.global.save')}}</el-button>&nbsp;&nbsp;
      <el-button @click="save">{{$t('message.global.reset')}}</el-button>
    </div>
  </div>
</template>

<script>
    export default {
        name: "edit-config",
        data : function(){
          return {
            configSource : "",
            configType : "",
          }
        },
        methods : {
          loadData : function(){
            if(this.versionId == ""){
              return;
            }
            this.$get("/config/findConfigContentByVersionId",{versionId : this.versionId}).then(data => {
              if(typeof(data) == 'undefined'){
                this.configSource = "";
                return;
              }
              this.configType = data.configType;
              this.configSource = data.content;
            });
          },
          save(){
            this.$post("/config/updateVersionConfigContent?versionId=" + this.versionId,{content : this.configSource}).then(() => {
              this.$message.success(this.$t("message.config.saveSuccess"))
              this.$emit("update");
            });
          }
        },
        watch : {
          versionId(){
            this.loadData();
          }
        },
        mounted : function(){
          this.loadData()
        },
        props : ['versionId']
    }
</script>

<style scoped>
  .enditConfig-textarea{width:100%;min-height: 470px;resize: none;border-color: #d2d0d0;}
  .edit-btn{display: flex;flex-direction: row-reverse;}
</style>
